<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《利用Flutter中的ListView进行动态卡片布局》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《利用Flutter中的ListView进行动态卡片布局》" />
<meta property="og:description" content="
本文主要介绍 listView下进行动态卡片布局
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/%E5%88%A9%E7%94%A8flutter%E4%B8%AD%E7%9A%84listview%E8%BF%9B%E8%A1%8C%E5%8A%A8%E6%80%81%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《利用Flutter中的ListView进行动态卡片布局》"/>
<meta name="twitter:description" content="
本文主要介绍 listView下进行动态卡片布局
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/%E5%88%A9%E7%94%A8flutter%E4%B8%AD%E7%9A%84listview%E8%BF%9B%E8%A1%8C%E5%8A%A8%E6%80%81%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80/" /><link rel="next" href="https://luckly.work/git%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6%E6%8A%A5%E9%94%99/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《利用Flutter中的ListView进行动态卡片布局》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/%E5%88%A9%E7%94%A8flutter%E4%B8%AD%E7%9A%84listview%E8%BF%9B%E8%A1%8C%E5%8A%A8%E6%80%81%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  1144 ,
        "url": "https:\/\/luckly.work\/%E5%88%A9%E7%94%A8flutter%E4%B8%AD%E7%9A%84listview%E8%BF%9B%E8%A1%8C%E5%8A%A8%E6%80%81%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80\/","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="Lucklyの博客 - 在阅读中遇见自己"><span class="header-title-pre"><i class='far fa-kiss-wink-heart fa-fw'></i></span><span id="id-1" class="typeit"></span></a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 所有文章 </a><a class="menu-item" href="/categories/flutter/"> Flutter </a><a class="menu-item" href="/categories/read/"> 读书笔记 </a><a class="menu-item" href="/categories/go/"> Go </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><a class="menu-item" href="/about/"> 关于 </a><a class="menu-item" href="https://github.com/ITmxs" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw'></i> Github </a><a class="menu-item" href="/friend/"><i class='fas fa-user-friends'></i> 友链 </a><span class="menu-item delimiter"></span><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="Lucklyの博客 - 在阅读中遇见自己"><span class="header-title-pre"><i class='far fa-kiss-wink-heart fa-fw'></i></span><span id="id-2" class="typeit"></span></a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        取消
                    </a>
                </div><a class="menu-item" href="/posts/" title="">所有文章</a><a class="menu-item" href="/categories/flutter/" title="">Flutter</a><a class="menu-item" href="/categories/read/" title="">读书笔记</a><a class="menu-item" href="/categories/go/" title="">Go</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><a class="menu-item" href="/about/" title="">关于</a><a class="menu-item" href="https://github.com/ITmxs" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw'></i>Github</a><a class="menu-item" href="/friend/" title=""><i class='fas fa-user-friends'></i>友链</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《利用Flutter中的ListView进行动态卡片布局》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="0001-01-01">0001-01-01</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 1144 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 3 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#效果">效果</a></li>
        <li><a href="#原理">原理</a>
          <ul>
            <li><a href="#card">card</a></li>
          </ul>
        </li>
        <li><a href="#合并">合并</a></li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍 listView下进行动态卡片布局</p>
</blockquote>
<p>真香！本来觉得用以前的java就能做的为啥还用flutter，但是最近接触flutter之后感觉这才是写移动应用的神器啊！
尤其是用java写的listView，各种适配器传参简直了</p>
<h2 id="效果">效果</h2>
<p>可以显示gif动图哦，真强大，某些模拟器中可能有闪烁现象，但是我的手机上没有，可能是兼容问题 ）
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086827827_F3E1A26286A1814C96AE9A791F8885FB"
        data-srcset="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086827827_F3E1A26286A1814C96AE9A791F8885FB, https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086827827_F3E1A26286A1814C96AE9A791F8885FB 1.5x, https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086827827_F3E1A26286A1814C96AE9A791F8885FB 2x"
        data-sizes="auto"
        alt="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086827827_F3E1A26286A1814C96AE9A791F8885FB"
        title="img" /></p>
<h2 id="原理">原理</h2>
<p>在完成这个效果之前，
分两步走，listview列表和card布局</p>
<p>listView</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120806213.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120806213.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120806213.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120806213.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120806213.png"
        title="image-20210731120806213" /></p>
<p>没有适配器，没有viewHolder,没有entity，flutter将他变成了一个纯前端的项目,简单到任何的注释都是那么的苍白</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">return ListView(
    children: &lt;Widget&gt;[
      Card(
        margin: EdgeInsets.all(10),
        child: Column(
          children: &lt;Widget&gt;[
            ListTile(
              title: Text(&#39;张三&#39;,
                  style: TextStyle(color: Colors.red),
                  textDirection: TextDirection.ltr),
              subtitle: Text(&#39;工程师&#39;),
            )
          ],
        ),
      ),
      Card(
        margin: EdgeInsets.all(10),
        child: Column(
          children: &lt;Widget&gt;[
            ListTile(
              title: Text(&#39;李四&#39;,
                  style: TextStyle(color: Colors.red),
                  textDirection: TextDirection.ltr),
              subtitle: Text(&#39;产品经理&#39;),
            )
          ],
        ),
      ),
      Card(
        margin: EdgeInsets.all(10),
        child: Column(
          children: &lt;Widget&gt;[
            ListTile(
              title: Text(&#39;王五&#39;,
                  style: TextStyle(color: Colors.red),
                  textDirection: TextDirection.ltr),
              subtitle: Text(&#39;程序员&#39;),
            )
          ],
        ),
      )
]
); //

</code></pre></td></tr></table>
</div>
</div><p>当然以上代码要写在build函数中</p>
<h3 id="card">card</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120723721.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120723721.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120723721.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120723721.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/image-20210731120723721.png"
        title="image-20210731120723721" />
加了注释，应该能看懂</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">return ListView(
    children: &lt;Widget&gt;[
      Card(
        margin: EdgeInsets.all(10),//表示边界距离
        child: Column(
          children: &lt;Widget&gt;[
            AspectRatio(
              aspectRatio: 16/9, //调整宽高比
              child:Image.network(&#34;http://img1.izaoxing.com/allimg/c190122/154Q51262OG0-c029.jpg&#34;,fit: BoxFit.cover,)//图像铺满
            ),
            ListTile(
              leading: CircleAvatar(  //专门将图片转换为头像
                backgroundImage:NetworkImage(&#34;http://img1.izaoxing.com/allimg/c190122/154Q51262OG0-c029.jpg&#34;)
              ) ,
              title: Text(&#39;张三&#39;,
                  style: TextStyle(color: Colors.red),
                  textDirection: TextDirection.ltr),
              subtitle: Text(&#39;工程师&#39;),
            )
          ],
        ),
      ),

]
); //

</code></pre></td></tr></table>
</div>
</div><h2 id="合并">合并</h2>
<p>难点在于，不能像一开始的listView那样单纯的重复Card,我们需要传参
同时，内容与代码必须要分离
<strong>以下代码没有删减，可直接复制使用</strong></p>
<p>在lib中新建一个资源包，新建文件
<img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086828500_76D7AA0BFE3E095AD4A16DEEAFF1FE4C"
        data-srcset="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086828500_76D7AA0BFE3E095AD4A16DEEAFF1FE4C, https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086828500_76D7AA0BFE3E095AD4A16DEEAFF1FE4C 1.5x, https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086828500_76D7AA0BFE3E095AD4A16DEEAFF1FE4C 2x"
        data-sizes="auto"
        alt="https://uploadfiles.nowcoder.com/images/20200417/2967044_1587086828500_76D7AA0BFE3E095AD4A16DEEAFF1FE4C"
        title="img" />
写入以下代码，实现逻辑与内容的分离</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">List listData=[
  {
    &#34;title&#34;:&#39;first&#39;,
    &#34;imageUrl&#34;:&#39;http://img1.izaoxing.com/allimg/c190122/154Q51262OG0-c029.jpg&#39;,
    &#34;description&#34;: &#39;the beautiful&#39;
  },
  {
    &#34;title&#34;:&#39;second&#39;,
    &#34;imageUrl&#34;:&#39;https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg&#39;,
    &#34;description&#34;: &#39;the beautiful&#39;
  },
  {
    &#34;title&#34;:&#39;third&#39;,
    &#34;imageUrl&#34;:&#39;https://pic2.zhimg.com/v2-848ed6d4e1c845b128d2ec719a39b275_b.jpg&#39;,
    &#34;description&#34;: &#39;the beautiful&#39;
  },
  {
    &#34;title&#34;:&#39;fourth&#39;,
    &#34;imageUrl&#34;:&#39;https://pic1.zhimg.com/50/v2-88b5da103cb64fe9e3f0d7b9d33fcfa4_hd.webp&#39;,
    &#34;description&#34;: &#39;the beautiful&#39;
  }
];

</code></pre></td></tr></table>
</div>
</div><p>在main.dart中，我们传入以下代码（import的路径可能需要修改）
将listData通过map形式传入成为value,然后取相应的key值传入对应的参数，listView会自动循环遍历value中的内容</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">import &#39;package:flutter/material.dart&#39;;
import &#39;package:flutter_app/res/listData.dart&#39;;
void main() =&gt; runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text(&#34;flutterCard&#34;),
          ),
          body: LayoutDemo()),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //TODO: implement build
    return ListView(
        children: listData.map((value){
          return Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: &lt;Widget&gt;[
                AspectRatio(
                  aspectRatio: 16/9,
                  child: Image.network(value[&#34;imageUrl&#34;],fit: BoxFit.fill,),
                ),
                ListTile(
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(value[&#34;imageUrl&#34;]),
                  ),
                  title:Text(value[&#34;title&#34;]),
                  subtitle: Text(value[&#34;description&#34;])
                )
             ],
          )
          );
        }).toList(),//注意这里要转换成列表，因为listView只接受列表
    );
  }
}


</code></pre></td></tr></table>
</div>
</div><p>综上，只需两个文件，几十行代码即可完成布局，开心O(∩_∩)O~~</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 0001-01-01</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/%E5%88%A9%E7%94%A8flutter%E4%B8%AD%E7%9A%84listview%E8%BF%9B%E8%A1%8C%E5%8A%A8%E6%80%81%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80/" data-title="《利用Flutter中的ListView进行动态卡片布局》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/%E5%88%A9%E7%94%A8flutter%E4%B8%AD%E7%9A%84listview%E8%BF%9B%E8%A1%8C%E5%8A%A8%E6%80%81%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/%E5%88%A9%E7%94%A8flutter%E4%B8%AD%E7%9A%84listview%E8%BF%9B%E8%A1%8C%E5%8A%A8%E6%80%81%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80/" data-title="《利用Flutter中的ListView进行动态卡片布局》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/%E5%88%A9%E7%94%A8flutter%E4%B8%AD%E7%9A%84listview%E8%BF%9B%E8%A1%8C%E5%8A%A8%E6%80%81%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80/" data-title="《利用Flutter中的ListView进行动态卡片布局》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/%E5%88%A9%E7%94%A8flutter%E4%B8%AD%E7%9A%84listview%E8%BF%9B%E8%A1%8C%E5%8A%A8%E6%80%81%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80/" data-title="《利用Flutter中的ListView进行动态卡片布局》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav">
            <a href="/git%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6%E6%8A%A5%E9%94%99/" class="next" rel="next" title="《Git上传文件报错》">《Git上传文件报错》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"data":{"id-1":"早起的年轻人","id-2":"早起的年轻人"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"},"typeit":{"cursorChar":"|","cursorSpeed":1000,"data":{"id-1":["id-1"],"id-2":["id-2"]},"duration":-1,"speed":100}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
